<!--
 * @Author: zqx me_zqx@163.com
 * @Date: 2025-02-20 10:18:37
 * @LastEditors: zqx me_zqx@163.com
 * @LastEditTime: 2025-03-14 18:11:28
 * @FilePath: /XMate-h5/src/views/customer/customerDetail/components/meddic/meddicHead.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="meddic-head flex items-center justify-between mb-0 py-6 px-1">
    <!-- MEDDIC 导航 -->
    <div class="flex items-center justify-between flex-auto pr-2 max-w-[300px]">
      <div v-for="item in meddicInfo" :key="item.key" class="nav-item">
        <div
          class="icon-wrapper rounded-full w-8 h-8 flex items-center justify-center text-base font-medium"
          :style="{
            backgroundColor: MEDDIC_STATUS_STYLE[item.status]?.bg,
            color: MEDDIC_STATUS_STYLE[item.status]?.text,
            border:
              item.status === MEDDIC_STATUS.NOT_FILLED ? '1px solid #DCDCDC' : 'none',
          }"
        >
          {{ item.icon }}
        </div>
      </div>
    </div>

    <!-- 右侧提示图标 -->
    <el-tooltip effect="light" popper-class="meddic-tooltip">
      <template #content>
        <div class="p-2 w-[300px]">
          <div
            v-for="(style, status) in MEDDIC_STATUS_STYLE"
            :key="status"
            class="flex items-center mb-2 last:mb-0"
          >
            <div
              class="min-w-3 min-h-3 rounded-full mr-2"
              :style="{
                backgroundColor: style.bg,
                border: status == MEDDIC_STATUS.NOT_FILLED ? '1px solid #DCDCDC' : 'none',
              }"
            ></div>
            <span>{{ style.label }} </span>
          </div>

          <p class="text-wrap text-[#8C8C8C] text-xs mt-4 leading-5">
            MEDDIC内容为AI自动生成，仅供参考。您可手动编辑修改AI生成的内容，也可对每个输入框锁定
            / 解锁，锁定后AI生成的内容将不会覆盖文本框，解锁后AI会继续生成
          </p>
        </div>
      </template>

      <img src="@/assets/customer/meddic-tip.svg" />
    </el-tooltip>
  </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { MEDDIC_STATUS, MEDDIC_STATUS_STYLE } from "./meddicConstants.js";

const props = defineProps({
  meddicInfo: {
    type: Array,
    default: () => [],
  },
});
</script>

<style lang="less" scoped>
.meddic-head {
  // box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 仅底部阴影效果 */

  .nav-item {
    .icon-wrapper {
      transition: all 0.3s ease;
    }
  }
}

:deep(.el-tooltip__popper) {
  max-width: 400px;
  line-height: 1.6;
  font-size: 14px;

  &.meddic-tooltip {
    padding: 12px 16px;

    .el-icon-question {
      font-size: 16px;
      cursor: help;
    }
  }
}
</style>
